﻿<!--
Модернизируйте кнопку «Показать информацию» так, чтобы она отображала скрытый абзац и скрывала видимый. 
    То есть при первом нажатии кнопка показывает абзац, при втором — скрывает, при третьем — снова показывает, и так далее. 

Доведите наши выпадающие списки «до ума». Во-первых, они должны себя вести так же, как и кнопка абзацем выше 
    (поочерёдно скрываться при нажатиях). После оптимизируйте код, «отловите» и исправьте все ошибки и казусы, 
    подумайте над оформлением. Также, неплохо отображать возле раскрытого пункта в качестве маркера минус, а возле закрытого — плюс. 
-->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>DOM Hierarchy</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="JavaScript.js"></script>
</head>
<body>

    The DOM presents documents as a hierarchy of Node objects that also implement other, more specialized interfaces. 
    <span style="display: none;">       
        Some types of nodes may have child nodes of various types, and others are leaf nodes that cannot have anything below them in the document structure. 
    </span>
    <button onclick="HideExpandText(this)">
        Expand text
    </button>

    <br />

    <ul>
        <li>item 1</li>
        <li  class="parent" onclick="DropdownList(this);">
            item 2
            <ul class="dropdownList">
                <li class="child" onclick="event.cancelBubble = true;">subitem 2.1</li>
                <li class="child"  onclick="event.cancelBubble = true;">subitem 2.2</li>
                <li class="child"  onclick="event.cancelBubble = true;">subitem 2.3</li>
            </ul>
        </li>
        <li class="parent" onclick="DropdownList(this);">
            item 3
            <ul class="dropdownList">
                <li class="child" onclick="event.cancelBubble = true;">subitem 3.1</li>
                <li class="child" onclick="event.cancelBubble = true;">subitem 3.2</li>
                <li class="child" onclick="event.cancelBubble = true;">subitem 3.3</li>
            </ul>
        </li>
        <li>item 4</li>
    </ul>
</body>
</html>